<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link th:href="@{/img/favicon.ico}" type="image/x-icon" rel="icon"/>
  <link th:href="@{/public/bootstrap.min.css}" rel="stylesheet"/>
  <link th:href="@{/css/login.css}" rel="stylesheet"/>
  <title>登录</title>
</head>

<body class="main text-center">
<input type="hidden" id="authorize-id" th:value="${authorizeId}"/>

<div id="particles-js"></div>

<main class="form-login">
  <div class="login-card">
    <div class="row">
      <picture>
        <img th:src="@{/img/logo.svg}" class="img-fluid mb-4 logo" alt="logo"/>
      </picture>
    </div>

    <div class="row">
      <p th:text="${error}" class="text-danger text-center text-break" id="error-msg"></p>
    </div>

    <form method="post" th:action="@{/login}" onsubmit="passwordLogin()" id="passwordForm">
      <input type="hidden" name="authorize_id" th:value="${authorizeId}"/>

      <div class="form-floating">
        <input type="text"
               name="username"
               th:value="${username}"
               class="form-control border-top-radius"
               placeholder="账号"
               id="username"
               required
        />
        <label for="username">账号</label>
      </div>
      <div class="form-floating">
        <input type="password"
               name="password"
               class="form-control"
               th:classappend="${captcha?'border-middle-radius':'border-bottom-radius'}"
               placeholder="密码"
               id="password"
               required
        />
        <label for="password">密码</label>
      </div>

      <div th:if="${captcha}" class="form-floating input-group">
        <input type="text"
               name="captcha"
               class="form-control border-bottom-radius"
               placeholder="验证码"
               id="captcha"
               required
        />
        <label for="captcha">验证码</label>
        <img th:src="@{'/api/captcha/' + ${authorizeId}}" title="点击刷新" alt="验证码"
             class="form-control border-bottom-radius captcha-img" onclick="refreshCaptcha(this)"/>
      </div>

      <div class="fw400 mb-3 d-flex justify-content-between">
        <div>
          <input type="checkbox" class="form-check-input" id="remember-me"/>
          <label class="form-check-label text-light" for="remember-me">记住账号</label>
        </div>

        <a th:href="@{'/forget_passwd/'+ ${authorizeId}}" class="text-light">忘记密码</a>
      </div>
      <button type="submit" class="w-100 btn btn-lg btn-primary">登 录</button>
    </form>

    <form method="post" th:action="@{/login/captcha}" class="d-none" id="mobileForm">
      <input type="hidden" name="authorize_id" th:value="${authorizeId}"/>

      <div class="form-floating">
        <input type="text"
               name="mobile"
               class="form-control border-top-radius"
               placeholder="手机或邮箱"
               id="mobile"
               required
        />
        <label for="mobile">手机或邮箱</label>
      </div>

      <div class="form-floating input-group mb-3">
        <input type="text"
               name="captcha"
               class="form-control border-bottom-radius"
               placeholder="验证码"
               id="security-code"
               required
        />
        <label for="security-code">验证码</label>
        <button type="button"
                th:data-url="@{/api/captcha}"
                class="btn btn-primary border-bottom-radius mw-30"
                onclick="sendSecurityCode(this)"
        >
          发送验证码
        </button>
      </div>

      <button type="button"
              th:data-url="@{/api/captcha}"
              onclick="return mobileLogin(this)"
              class="w-100 btn btn-lg btn-primary">登 录
      </button>
    </form>

    <div class="row mt-3">
      <div class="col">
        <a class="btn btn-link d-none" onclick="changeLoginType()" title="账号密码登录" id="passwordIcon">
          <img class="fs2rem" th:src="@{/svg/password.svg}" alt="账号密码登录"/>
        </a>

        <a class="btn btn-link" onclick="changeLoginType()" title="验证码登录" id="mobileIcon">
          <img class="fs2rem" th:src="@{/svg/phone.svg}" alt="验证码登录"/>
        </a>

        <a class="btn btn-link" th:each="server : ${servers}"
           th:href="@{'/third_login/' + ${authorizeId} + '/' + ${server.id}}"
           th:title="${'使用' + server.name + '登录'}">
          <img class="fs2rem" th:src="${server.logoUrl}" th:alt="${server.name}"/>
        </a>
      </div>
    </div>
  </div>
</main>

<script type="text/javascript" th:src="@{/public/particles.min.js}"></script>
<script type="text/javascript" th:src="@{/public/axios.min.js}"></script>
<script type="text/javascript" th:src="@{/js/particles.js}"></script>
<script type="text/javascript" th:src="@{/js/sec_code.js}"></script>
<script type="text/javascript" th:src="@{/js/cookie.js}"></script>
<script type="text/javascript" th:src="@{/js/login.js}"></script>
</body>
</html>
